@mixin sprite-width($sprite) {
  width: nth($sprite, 5);
}

@mixin sprite-height($sprite) {
  height: nth($sprite, 6);
}

@mixin sprite-bg($sprite){

  $sprite-offset-x: nth($sprite, 3);
  $sprite-offset-y: nth($sprite, 4);
  $sprite-image: nth($sprite, 9);
  display: inline-block;
  background: url(#{$sprite-image}) $sprite-offset-x  $sprite-offset-y;
}

@mixin sprite($sprite) {
  @include sprite-width($sprite);
  @include sprite-height($sprite);
  @include sprite-bg($sprite);
}

// The `sprites` mixin generates identical output to the CSS template
//   but can be overridden inside of SCSS
//
// @include sprites($spritesheet-sprites);
@mixin sprites($sprites) {
  @each $sprite in $sprites {
    $sprite-name: nth($sprite, 10);
    .#{$sprite-name} {
      @include sprite($sprite);
    }
  }
}
